
<!-- 
	订单列表Item
 -->
<template>
	<view class="order-all-box">
		<view class="shop-name u-line-1">
			<text class="iconfont iconshangpinshengou"></text>
			魅族旗舰店
		</view>
		
		<!--  商品信息  -->
		<view class="goods-item">
			
			<view class="goods-box" @tap="goodsTap">
				<view class="goods-left">
					<image src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607679809696&di=21f708ed29292bef49158d3ac9000a98&imgtype=0&src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201110%2F07%2F082726lghakmgjmgnah9aa.jpg" class="goods-img"></image>
				</view>
				<view class="goods-con">
					<view class="goods-name u-line-2">
						我的代销阿斯达就opus水电费是大V四大皆空阿斯蒂芬阿斯蒂芬士大夫赔偿比较忙竖的GV收到货今天
					</view>
					<view class="goods-price">
						<text class="prcie">￥78.99</text>
						<text class="del-price">￥88.99</text>
					</view>
					<view class="spec-box">
						<view class="spec">
							白色黑色阿斯利康的阿斯达
						</view>
						<view class="spec-num">
							x 1
						</view>
					</view>
				</view>
			</view>
			
			<view class="goods-box" @tap="goodsTap">
				<view class="goods-left">
					<image src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607679809696&di=21f708ed29292bef49158d3ac9000a98&imgtype=0&src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201110%2F07%2F082726lghakmgjmgnah9aa.jpg" class="goods-img"></image>
				</view>
				<view class="goods-con">
					<view class="goods-name u-line-2">
						我的代销阿斯达就opus水电费是大V四大皆空阿斯蒂芬阿斯蒂芬士大夫赔偿比较忙竖的GV收到货今天
					</view>
					<view class="goods-price">
						<text class="prcie">￥78.99</text>
						<text class="del-price">￥88.99</text>
					</view>
					<view class="spec-box">
						<view class="spec">
							白色黑色阿斯利康的阿斯达
						</view>
						<view class="spec-num">
							x 1
						</view>
					</view>
				</view>
			</view>
			
		</view>
		<!--  商品信息  -->
		
		<!--  价格  -->
		<view class="total-box">
			含运费(￥20)  总计: <text class="total-price">￥98.99</text>
		</view>
		
		<view class="btn-box">
			<view class="btn">去付款</view>
			<view class="btn">去评价</view>
			<view class="btn">申请退款</view>
			<view class="btn btn-hollow">取消订单</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data(){
			return {
				
			}
		},
		methods:{
			goodsTap(){
				this.$emit("goodsTap")
			}
		}
	}
</script>

<style lang="scss" scoped>
	.order-all-box{
		width: 100%;
		.shop-name{
			color: #4B4B4B;
			font-size: 28rpx;
			.iconfont{
				font-size: 32rpx;
				color: #4B4B4B;
				margin-right: 20rpx;
			}
		}
		.goods-item{
			.goods-box{
				padding-top: 20rpx;
				display: flex;
				justify-content: flex-start;
				align-items: flex-start;
				.goods-left{
					min-width: 180rpx;
					max-width: 180rpx;
					.goods-img{
						width: 160rpx;
						height: 160rpx;
					}
				}
				.goods-con{
					flex-grow: 1;
					.goods-name{
						color: #414141;
					}
					.goods-price{
						padding-top: 6rpx;
						.prcie{
							font-size: 32rpx;
							color: #FA436A;
						}
						.del-price{
							font-size: 20rpx;
							color: #888888;
							text-decoration: line-through;
							padding-left: 20rpx;
							font-family: "宋体";
						}
					}
					.spec-box{
						display: flex;
						align-items: center;
						justify-content: space-between;
						.spec-num{
							min-width: 100rpx;
							max-width: 100rpx;
						}
						.spec{
							max-width: calc(100% - 100rpx);
						}
					}
				}
			}
		}
		.total-box{
			padding-top: 12rpx;
			.total-price{
				font-size: 32rpx;
				color: #FA436A;
				margin-left: 20rpx;
			}
		}
		.btn-box{
			display: flex;
			align-items: flex-start;
			justify-content: flex-end;
			padding-top: 40rpx;
			.btn{
				border: 2rpx solid #FA436A;
				background: #FA436A;
				color: #FFFFFF;
				line-height: 1;
				padding: 10rpx 24rpx;
				border-radius: 6rpx 6rpx;
				margin-left: 20rpx;
			}
			.btn:nth-of-type(1){
				margin-left: 0;
			}
			.btn-hollow{
				border-color: #A0A0A0;
				color: #666666;
				background: #FFFFFF;
			}
		}
	}
</style>
